{extend name="common/common" /}

{block name="style"}
<style type="text/css">
.layui-form-label{
	width: 90px;
}
.btn.btn-info{
	margin-top: 2px;
}
.configList{
	display: block;
	border: 2px solid #e7eaec;
	padding: 15px;
	height: 300px;
	overflow-y: scroll;
}
.badge{
	background-color: #ec4758;
	color: #FFF;
	padding:3px 4px;
	font-weight: 1;
	border-radius: 50%;
	cursor: pointer;
}
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight col-md-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>产品详情</h5>
        </div>
        <div class="ibox-content">
			<form class="layui-form" action="" id="editForm">
				<div class="layui-form-item">
					<label class="layui-form-label">产品名称</label>
					<div class="layui-input-inline">
						<input type="text" name="name" value="{$proInfo.name|default=''}" class="layui-input">
					</div>

					<label class="layui-form-label">学期年限</label>
					<div class="layui-input-inline">
						<input type="text" name="age_limit" value="{$proInfo.age_limit|default=''}" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">选择学校</label>
					<div class="layui-input-inline">
						<input value="{$proInfo.school|default=''}" type="text" name="school" readonly class="layui-input selectSchool school">
						<input value="{$proInfo.school_id|default=''}" type="hidden" name="school_id" class="school_id">
					</div>

					<label class="layui-form-label">选择专业</label>
					<div class="layui-input-inline">
						<input value="{$proInfo.major|default=''}" type="text" name="major" readonly class="layui-input selectSchool major">
						<input value="{$proInfo.major_id|default=''}" type="hidden" name="major_id" class="major_id">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">所属分类</label>
					<div class="layui-input-inline">
						<input value="{$proInfo.c_name|default=''}" type="text" name="c_name" readonly class="layui-input selectClassify">
						<input value="{$proInfo.c_id|default=''}" type="hidden" name="c_id" class="c_id">
					</div>

					<label class="layui-form-label">学　　费</label>
					<div class="layui-input-inline">
						<input value="{$proInfo.tuition|default=''}" type="text" name="tuition" class="layui-input">
					</div>
				</div>

		        <hr class="layui-bg-orange">
		        <h5 style="padding: 5px;margin-bottom: 15px;">产品属性</h5>
		        <div class="row" style="margin-bottom: 15px;">
			        <div id="attrbox"></div>
			        	<div class="layui-form-item">
				        	<label class="layui-form-label">产品价格</label>
							<div class="layui-input-inline">
								<input type="number" class="layui-input price">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"></label>
							<button class="btn btn-info" type="button" id="addCfgPro">添加</button>
						</div>
					</div>
					<input type="hidden" value="{$attr_info.code}" name="attr_info" id="attr_info">
					<ul class="configList list-group">
						{volist name="attr_info.translation" id="v"}
						<li class="list-group-item">
							{$v}
						</li>
						{/volist}
					</ul>
					<div class="layui-form-item text-center">
			        	<input type="hidden" value="{$proInfo.id|default=''}" name="id">
			        	{if authCheck('product/productedit')}
			            <button class="btn btn-primary" type="submit">保存</button>
			            {/if}
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="laycontent" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="tree"></ul>
</div>

<div class="layclassify" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="classifytree"></ul>
</div>
{/block}

{block name="script"}
<script>
$(function(){
	getTree();
	layui.use(['form'], function(){
  		var form = layui.form;
  	});

	// 添加产品的自定义配置
	$('#addCfgPro').on('click',function(){
		var str = '';
		var str_show = '';
		var aAttr = $('#attrbox select');
		var aLab = $('#attrbox label');
		for(var i=0;i<aAttr.length;i++){
			var aOption = aAttr[i].getElementsByTagName('option');
			for(var j=0;j<aOption.length;j++){
				if(aOption[j].selected){
					var show = aOption[j].innerText;
				}
			}
			if(i<4 && aAttr[i].value == ''){
				layer.msg("产品属性钱四项为必选项", {anim: 6});
				return false;
			}
			if(aAttr[i].value != ''){
				str += aAttr[i].value + ",";
				str_show += aLab[i].innerText + ":" + '<span style="color:#ed5565;font-weight:999;">'+ show + '</span>' + '，';
			}
		}
		if($('.price').val() != ''){
			str += "price:" + $('.price').val() + "^";
			str_show += "价格：" + '<span style="color:#ed5565;font-weight:999;">' + $('.price').val() + '</span>';
		}else{
			layer.msg("产品价格不能为空", {anim: 6});
			return false;
		}
		var html = $('.configList').html();
		html += '<li class="list-group-item">' + str_show;
		html += '<span class="badge" data-param="'+str+'">';
		html += '<i class="fa fa-remove"></i></span></li>';
		$('.configList').html(html);
		$('#attr_info').val($('#attr_info').val() + str);
		// 删除产品自定义属性
		$('.badge').on('click',function(){
			var st = $(this).attr('data-param');
			var attr_info = $('#attr_info').val().split(st);
			var str = '';
			for(var i=0;i<attr_info.length;i++){
				str += attr_info[i];
			}
			$('#attr_info').val(str)
			$(this).parent('li.list-group-item').remove();
		});
	});

	// 删除产品自定义属性
	$('.badge').on('click',function(){
		var st = $(this).attr('data-param');
		var attr_info = $('#attr_info').val().split(st);
		var str = '';
		for(var i=0;i<attr_info.length;i++){
			str += attr_info[i];
		}
		$('#attr_info').val(str)
		$(this).parent('li.list-group-item').remove();
	});

	$('.selectSchool').on('click',function(){
		selectSchoolBox = layer.open({
            type: 1,
            title: '请选择学校和专业',
            anim: 2,
            skin: 'layui-layer-molv', //加上边框
            area: ['300px', '450px'], //宽高
            content: $(".laycontent")
        });
	});

	$('.selectClassify').on('click',function(){
		selectclassifyBox = layer.open({
            type: 1,
            title: '请选择所属分类',
            anim: 2,
            skin: 'layui-layer-molv', //加上边框
            area: ['300px', '450px'], //宽高
            content: $(".layclassify")
        });
	});

	
	$('#editForm').on('submit',function(){
		var params = $('#editForm').serialize();
		$.post('productEdit',params,function(res){
			if(res.code == 1){
				layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    layer.closeAll();
                });
			}else{
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});
});
function getTree(){
    layui.use(['tree', 'layer'], function(){
        var layer = layui.layer;

        $.getJSON("{:url('product/school')}", function(res){
            if(111 == res.code){
                window.location.reload();
            }
            layui.tree({
                elem: '#tree'
                ,nodes: res.data
                ,click: function(node){
                    nowNode = node;
                    if(node.pid != 0){
                    	$('.major').val(node.name);
                    	$('.major_id').val(node.id);
                    	for(var i=0;i<res.data.length;i++){
                    		if(node.pid == res.data[i].id){
                    			$('.school').val(res.data[i].name);
                    			$('.school_id').val(res.data[i].id);
                    		}
                    	}
                    	layer.close(selectSchoolBox);
                    }
                }
            });
        });

        $.getJSON("{:url('product/classify')}", function(res){
            layui.tree({
                elem: '#classifytree'
                ,nodes: res.data
                ,click: function(node){
                    nowNode = node;
                	$('.selectClassify').val(node.name);
                	$('.c_id').val(node.id);
                	layer.close(selectclassifyBox);
                }
            });
        });

        $.getJSON("{:url('product/attr')}",function(res){
        	var attrhtml = '';
			for(var i=0;i<res.data.length;i++){
				attrhtml += '<div class="layui-form-item">';
				attrhtml += '<label class="layui-form-label attrName">'+ res.data[i].name +'</label>';
				attrhtml += '<div class="layui-input-inline"><select class="attrVal"><option value="">请选择</option>';
				for(var j=0;j<res.data[i].children.length;j++){
					attrhtml +='<option value="'+ res.data[i].id + '-' + res.data[i].children[j].id +'">'+ res.data[i].children[j].name +'</option>';
				}
				attrhtml += '</select></div></div>';
				$('#attrbox').html(attrhtml);
				var form = layui.form;
				form.render();
			}
        })
    });
}
</script>
{/block}